<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neo4j图数据库管理系统 - 主页</title>
    <link href="https://cdn.tailwindcss.com" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen">
    <nav class="bg-blue-600 text-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-database text-2xl mr-2"></i>
                <h1 class="text-xl font-bold">Neo4j图数据库管理系统</h1>
            </div>
            <div class="flex items-center">
                <span class="mr-4">欢迎, {{ username }}</span>
                <a href="{{ url_for('logout') }}" class="hover:text-blue-200 transition duration-200">
                    <i class="fa fa-sign-out mr-1"></i>退出登录
                </a>
            </div>
        </div>
    </nav>

    <div class="container mx-auto px-4 py-8">
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-bold mb-4 text-gray-700">节点搜索</h2>
            <form method="POST" class="flex flex-col md:flex-row gap-4">
                <input type="text" name="query" placeholder="请输入搜索关键词..." 
                       class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-lg transition duration-200 flex items-center justify-center">
                    <i class="fa fa-search mr-2"></i>搜索
                </button>
            </form>
            
            {% if error %}
            <div class="mt-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                {{ error }}
            </div>
            {% endif %}
        </div>

        {% if nodes and nodes|length > 0 %}
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-bold mb-6 text-gray-700">搜索结果 ({{ nodes|length }})</h2>
            
            {% for item in nodes %}
            <div class="mb-8 pb-6 border-b border-gray-200 last:border-0">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">
                        节点: {{ item.node.properties.name or '未命名节点' }}
                        <span class="ml-2 text-sm font-normal text-gray-500">
                            ID: {{ item.node.id }} | 标签: {{ item.node.labels|join(', ') }}
                        </span>
                    </h3>
                </div>
                
                <!-- 节点属性表格 -->
                <div class="mb-6">
                    <h4 class="font-medium text-gray-700 mb-2">节点属性</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white border border-gray-200">
                            <thead>
                                <tr class="bg-gray-100">
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">属性名</th>
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">属性值</th>
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for key, value in item.node.properties.items() %}
                                <tr class="hover:bg-gray-50">
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ key }}</td>
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">
                                        <span class="node-property" data-node-id="{{ item.node.id }}" data-prop-name="{{ key }}">
                                            {{ value }}
                                        </span>
                                    </td>
                                    <td class="py-2 px-4 border-b text-sm">
                                        <button class="edit-btn text-blue-500 hover:text-blue-700 transition duration-200"
                                                data-node-id="{{ item.node.id }}" data-prop-name="{{ key }}">
                                            <i class="fa fa-pencil"></i> 编辑
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- 上游节点 -->
                {% if item.upstream and item.upstream|length > 0 %}
                <div class="mb-6">
                    <h4 class="font-medium text-gray-700 mb-2">上游节点 ({{ item.upstream|length }})</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white border border-gray-200">
                            <thead>
                                <tr class="bg-gray-100">
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">关系类型</th>
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">节点ID</th>
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">节点名称</th>
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">节点标签</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for rel in item.upstream %}
                                <tr class="hover:bg-gray-50">
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ rel.relation }}</td>
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ rel.node.id }}</td>
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ rel.node.properties.name or '未命名' }}</td>
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ rel.node.labels|join(', ') }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endif %}
                
                <!-- 下游节点 -->
                {% if item.downstream and item.downstream|length > 0 %}
                <div>
                    <h4 class="font-medium text-gray-700 mb-2">下游节点 ({{ item.downstream|length }})</h4>
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white border border-gray-200">
                            <thead>
                                <tr class="bg-gray-100">
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">关系类型</th>
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">节点ID</th>
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">节点名称</th>
                                    <th class="py-2 px-4 border-b text-left text-sm font-semibold text-gray-700">节点标签</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for rel in item.downstream %}
                                <tr class="hover:bg-gray-50">
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ rel.relation }}</td>
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ rel.node.id }}</td>
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ rel.node.properties.name or '未命名' }}</td>
                                    <td class="py-2 px-4 border-b text-sm text-gray-700">{{ rel.node.labels|join(', ') }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% elif request.method == "POST" %}
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="text-center py-8">
                <i class="fa fa-search text-gray-300 text-5xl mb-4"></i>
                <p class="text-gray-500">没有找到匹配的节点，请尝试其他搜索关键词</p>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- 编辑模态框 -->
    <div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800">编辑属性</h3>
                <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <form id="editForm">
                <input type="hidden" id="nodeId">
                <input type="hidden" id="propName">
                
                <div class="mb-4">
                    <label for="propValue" class="block text-gray-700 text-sm font-medium mb-2">属性值</label>
                    <input type="text" id="propValue" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div class="flex justify-end">
                    <button type="button" id="cancelEdit" class="mr-2 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition duration-200">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-200">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 提示消息 -->
    <div id="toast" class="fixed bottom-4 right-4 px-6 py-3 rounded-md shadow-lg transform transition-all duration-300 translate-y-20 opacity-0 z-50"></div>

    <script>
        // 编辑按钮点击事件
        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const nodeId = this.getAttribute('data-node-id');
                const propName = this.getAttribute('data-prop-name');
                const propValue = document.querySelector(`.node-property[data-node-id="${nodeId}"][data-prop-name="${propName}"]`).textContent;
                
                // 填充模态框
                document.getElementById('nodeId').value = nodeId;
                document.getElementById('propName').value = propName;
                document.getElementById('propValue').value = propValue;
                
                // 显示模态框
                document.getElementById('editModal').classList.remove('hidden');
            });
        });
        
        // 关闭模态框
        document.getElementById('closeModal').addEventListener('click', function() {
            document.getElementById('editModal').classList.add('hidden');
        });
        
        document.getElementById('cancelEdit').addEventListener('click', function() {
            document.getElementById('editModal').classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        document.getElementById('editModal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.classList.add('hidden');
            }
        });
        
        // 表单提交事件
        document.getElementById('editForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const nodeId = parseInt(document.getElementById('nodeId').value);
            const propName = document.getElementById('propName').value;
            const propValue = document.getElementById('propValue').value;
            
            // 调用更新接口
            fetch('/api/update-node', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    node_id: nodeId,
                    properties: {
                        [propName]: propValue
                    }
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新页面显示
                    document.querySelector(`.node-property[data-node-id="${nodeId}"][data-prop-name="${propName}"]`).textContent = propValue;
                    
                    // 显示成功消息
                    showToast('属性更新成功', 'bg-green-500 text-white');
                } else {
                    // 显示错误消息
                    showToast(`更新失败: ${data.message || '未知错误'}`, 'bg-red-500 text-white');
                }
                
                // 关闭模态框
                document.getElementById('editModal').classList.add('hidden');
            })
            .catch(error => {
                showToast(`更新失败: ${error.message}`, 'bg-red-500 text-white');
                document.getElementById('editModal').classList.add('hidden');
            });
        });
        
        // 显示提示消息
        function showToast(message, className) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-md shadow-lg transform transition-all duration-300 z-50 ${className}`;
            
            // 显示
            toast.classList.remove('translate-y-20', 'opacity-0');
            
            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }
    </script>
</body>
</html>
